{% extends 'generic/object_retrieve.html' %}
{% load helpers %}
{% load static %}

{% block content %}
    <div class="row">
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header">
                    <strong>Change</strong>
                </div>
                <table class="table table-hover card-body attr-table">
                    <tr>
                        <td>Time</td>
                        <td>
                            {{ object.time }}
                        </td>
                    </tr>
                    <tr>
                        <td>User</td>
                        <td>
                            {{ object.user|default:object.user_name }}
                        </td>
                    </tr>
                    <tr>
                        <td>Action</td>
                        <td>
                            {{ object.get_action_display }}
                        </td>
                    </tr>
                    <tr>
                        <td>Object Type</td>
                        <td>
                            {{ object.changed_object_type }}
                        </td>
                    </tr>
                    <tr>
                        <td>Object</td>
                        <td>
                            {% if object.changed_object and object.changed_object.get_absolute_url %}
                                {{ object.changed_object|hyperlinked_object }}
                            {% else %}
                                {{ object.object_repr }}
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <td>Request ID</td>
                        <td>
                            {{ object.request_id }}
                        </td>
                    </tr>
                    <tr>
                        <td>Change Context</td>
                        <td>
                            {{ object.get_change_context_display }}
                        </td>
                    </tr>
                    <tr>
                        <td>Change Context Detail</td>
                        <td>
                            {{ object.change_context_detail | placeholder }}
                        </td>
                    </tr>
                </table>
            </div>
            <div class="card">
                <div class="card-header">
                    <strong>Object Data</strong>
                </div>
                <div class="card-body">
                    <div class="nb-editor-container"
                         data-lang="json"
                         data-value="{{ object.object_data|render_json:False }}"
                         style="max-height: 300px">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card">
                <div class="card-header">
                    <strong>Difference</strong>
                    <div class="btn-group btn-group-sm float-end d-print-none" role="group">
                        {% if prev_change %}
                            <a href="{% url 'extras:objectchange' pk=prev_change.pk %}" class="btn btn-secondary">
                                <span class="mdi mdi-chevron-left" aria-hidden="true"></span> Previous
                            </a>
                        {% else %}
                            <a aria-disabled="true" class="btn btn-secondary disabled">
                                <span class="mdi mdi-chevron-left" aria-hidden="true"></span> Previous
                            </a>
                        {% endif %}
                        {% if next_change %}
                            <a href="{% url 'extras:objectchange' pk=next_change.pk %}" class="btn btn-secondary">
                                Next <span class="mdi mdi-chevron-right" aria-hidden="true"></span>
                            </a>
                        {% else %}
                            <a aria-disabled="true" class="btn btn-secondary disabled">
                                Next <span class="mdi mdi-chevron-right" aria-hidden="true"></span>
                            </a>
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    {% if diff_added == diff_removed %}
                        <span class="text-secondary" style="margin-left: 10px;">
                            {% if object.action == 'create' %}
                                Object created
                            {% elif object.action == 'delete' %}
                                Object deleted
                            {% else %}
                                No changes
                            {% endif %}
                        </span>
                    {% else %}
                        <div class="nb-editor-container"
                             data-mode="diff"
                             data-original="{{ diff_removed | render_json:False }}"
                             data-modified="{{ diff_added | render_json:False }}"
                             data-lang="json"
                             style="max-height: 730px">
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            {% include 'panel_table.html' with table=related_changes_table heading='Related Changes' %}
            {% if related_changes_count > related_changes_table.rows|length %}
                <div class="float-end">
                    <a href="{% url 'extras:objectchange_list' %}?request_id={{ object.request_id }}" class="btn btn-primary">See all {{ related_changes_count|add:"1" }} changes</a>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascript %}
    {{ block.super }}
    <script src="{% static 'js/editor.js' %}"></script>
{% endblock %}
